<template>
  <div id="app" class="app-content">
    <!-- 头部筛选 -->
    <search @show="show" />
    <div class="stand"></div>
    <!-- 轮播图 -->
    <swiperpack :arr="arr" />

    <div class="menuArr">
      <div class="menu">
        <div class="icon-img">
          <icons iconName="icon-shouye" />
        </div>
        <p>租房</p>
      </div>
      <div class="menu">
        <div class="icon-img ico2">
          <icons iconName="icon-wj-zd" />
        </div>
        <p>账单</p>
      </div>
      <div class="menu">
        <div class="icon-img ico3">
          <icons iconName="icon-gonggao" />
        </div>
        <p>公告</p>
      </div>
      <div class="menu">
        <div class="icon-img ico4">
          <icons iconName="icon-ziyuan" />
        </div>
        <p>更多</p>
      </div>
    </div>
    <p class="list-tit">推荐公寓</p>

    <div class="roomList">
      <roomInfo
        v-for="(item, index) in arr"
        :key="index"
        :arr="item"
        @toGo="toGo"
      />

      <div class="stand"></div>
    </div>

    <tabbar />
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/info">info</router-link>
    </div> -->
    <!-- <router-view/> -->
  </div>
</template>


<script>
import search from "@/components/search/index";
import swiperpack from "@/components/swiperpack/index";
import roomInfo from "@/components/roomInfo/index";
import icons from "@/components/icon/index";
import tabbar from "@/components/tabbar/index";
import { dataArr } from "@/utils/index";

export default {
  name: "home",
  components: {
    search,
    swiperpack,
    roomInfo,
    icons,
    tabbar,
  },
  data() {
    return {
      val: "",
      arr: [],
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute("style", "background:#f7f7f7;margin:0");
    });
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy() {
    document.body.removeAttribute("style");
  },
  created() {
    this.show('');
  },
  methods: {
    show(e) {
      this.arr = []
      if (e != "") {
        let exp = eval("/" + e + "/g")
				dataArr().forEach((item,index) => {
          if (item.name.indexOf(e)>0) {
					this.arr.push(item)
          }
				})
      } else {
        this.arr = dataArr();
      }
    },
    /**
     * 跳转
     */
    toGo() {
      console.log(123)
      this.$router.push("/info");
    },
    /**
     * 名称筛选
     */
    keyupSearchInput(e) {
      // 搜索回车键
      if (e.keyCode == 13) {
        console.log(this.$refs.searchInput.value);
      }
    },
  },
};
</script>


<style lang="less">
.app-content {
  width: 100%;
  height: 100%;

  .menuArr {
    padding-top: 3vw;
    display: flex;
    .menu {
      width: 25%;
      text-align: center;
      .icon-content {
        background: linear-gradient(90deg, #fb8942, #fcbe75);
        margin: 0 auto;
        justify-content: center;
        border-radius: 50%;
        width: 12vw;
        height: 12vw;
        display: flex;
        align-items: center;
      }

      .ico2 .icon-content {
        background: linear-gradient(90deg, #7a64f9, #8963ef);
      }

      .ico3 .icon-content {
        background: linear-gradient(90deg, #ef548f, #f98da4);
      }

      .ico4 .icon-content {
        background: linear-gradient(90deg, #2cb6f5, #53cefb);
      }

      .iconfont {
        font-size: 6vw;
        color: #ffffff;
      }

      p {
        font-size: 3vw;
      }
    }
  }

  .list-tit {
    text-align: left;
    padding: 0 7vw;
    font-size: 4vw;
    font-weight: 700;
  }

  .roomList {
    padding: 0 5vw;
    .room-content {
      margin-bottom: 3vw;
    }
  }
}

.stand {
  width: 100%;
  height: 13vw;
}
</style>
